<html>

<head>
    <meta charset="utf8">
    <style>
        .all {
            width: 100%;
            height: 1000px;
            background-color: #52acda;
        }
        .inner{width:1200px;
        margin: 0 auto; }
        
        .sou {
            width: 700px;
            height: 42px;
            position: absolute;
            margin: 80px 260px 900px 150px;
            background-color: #e0e0e0;
            border-radius: 12px;
        }
        
        .img {
            position: absolute;
            margin: 80px 260px 900px 150px;
        }
        
        .community {
            width: 800px;
            height: 450px;
            position: absolute;
            margin: 150px 210px 50px 130px;
            border: 1px solid salmon;
        }
        
        .zuo {
            width: 266px;
            height: 450px;
            float: left;
            border: 1px solid salmon;
        }
        
        .you {
            width: 525px;
            height: 450px;
            float: right;
            border: 1px solid salmon;
        }
        
        .yueqiao {
            width: 266px;
            height: 300px;
            background-color: #00736d;
        }
        
        .qiyi {
            width: 266px;
            height: 144px;
            margin-top: 6px;
            background-color: #00736d;
        }
        
        .shufa {
            float: left;
            width: 126px;
            height: 126px;
            background-color: #00736d;
        }
        
        .dongman {
            float: left;
            width: 126px;
            height: 126px;
            margin-left: 6px;
            background-color: #00736d;
        }
        
        .lanqiu {
            float: left;
            width: 126px;
            height: 126px;
            margin-left: 6px;
            background-color: #00736d;
        }
        
        .sanda {
            float: left;
            width: 126px;
            height: 126px;
            margin-left: 6px;
            background-color: #00736d;
        }
        
        .wudao {
            width: 258px;
            height: 317px;
            margin-top: 132px;
            background-color: #00736d;
        }
        
        .hanfu {
            width: 258px;
            height: 166px;
            margin-left: 264px;
            margin-top: -317px;
            background-color: #00736d;
        }
        
        .yumaoqiu {
            width: 126px;
            height: 143px;
            margin-left: 264px;
            margin-top: 6px;
            background-color: #00736d;
            border: 1px solid salmon;
        }
        
        .sheyin {
            width: 126px;
            height: 145px;
            margin-left: 399px;
             margin-top: -145px;
            background-color: #00736d;
        }
    </style>


</head>

<body>
    <div class="all">
        <div class="inner">
        <div class="img"><img src="search.jpg"></div>
        <input class="sou" type="text" placeholder="在此搜索你喜爱的团队">
        <div class="community">
            <div class="zuo">
                <div class="yueqiao">月桥杂志社</div>
                <div class="qiyi">棋艺</div>

            </div>
            <div class="you">
                <div class="shufa">书法</div>
                <div class="dongman">动漫</div>
                <div class="lanqiu">篮球</div>
                <div class="sanda">散打</div>
                <div class="wudao">舞蹈</div>
                <div class="hanfu">汉服</div>
                <div class="yumaoqiu">羽毛球</div>
                <div class="sheyin">摄影</div>

            </div>



        </div>



        </div>
    </div>

</body>

</html>